<!DOCTYPE HTML>
<html lang ="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>中移物联网开放平台手机测试</title>
</head>
<body width="100px" height="100px">
<style>
	body{
		background: #DEE7F5;
		margin: 0;
		padding: 0;
	}
	body *{
		font-family: "Microsoft YaHei", sans-serif;
		color: #92A5BA;

	}
	.main{
		padding: 20px;
	}
	h2{
		font-size: 18px;;
	}
	img{
		max-width: 100%;
	}
</style>
<div class="header"></div>

<div class="main">
	<h1>Detecting device orientation</h1>

	<h2>
		<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained" target="_blank">DeviceOrientation</a>是判断手机的物理方向的，即当前手机如何放置的，硬件为陀螺仪
	</h2>
	<p>absolute:<span id="absoluteOrientation"></span></p>
	<p><img src="https://developer.mozilla.org/@api/deki/files/5695/=alpha.png" />alpha:<span id="alphaOrientation"></span></p>
	<p><img src="https://developer.mozilla.org/@api/deki/files/5696/=beta.png" />beta:<span id="betaOrientation"></span></p>
	<p><img src="https://developer.mozilla.org/@api/deki/files/5697/=gamma.png" />gamma:<span id="gammaOrientation"></span></p>

	<h2>
		DeviceMotionEvent是判断加速度的，DeviceMotionEvent.acceleration不含重力，DeviceMotionEvent.accelerationIncludingGravity含重力，硬件为加速度传感器
	</h2>
	<h3>不含重力(如果手机硬件无法去除重力加速度，则这些值都为空)：</h3>
	<p>accelerationX:<span id="accelerationX"></span></p>
	<p>accelerationY:<span id="accelerationY"></span></p>
	<p>accelerationZ:<span id="accelerationZ"></span></p>

	<h3>含重力：</h3>
	<p>accelerationIncludingGravityX:<span id="accelerationIncludingGravityX"></span></p>
	<p>accelerationIncludingGravityY:<span id="accelerationIncludingGravityY"></span></p>
	<p>accelerationIncludingGravityZ:<span id="accelerationIncludingGravityZ"></span></p>

</div>
<script>
	function $(s){
		return document.querySelector(s);
	}

	var payLoad = {
		deviceorientation: {},
		devicemotion: {}
	};

	window.addEventListener("deviceorientation", function (e) {
		$('#absoluteOrientation').innerHTML = e.absolute;
		$('#alphaOrientation').innerHTML = e.alpha;
		$('#betaOrientation').innerHTML = e.beta;
		$('#gammaOrientation').innerHTML = e.gamma;
		payLoad.deviceorientation.alpha = alpha;
		payLoad.deviceorientation.beta = beta;
		payLoad.deviceorientation.gamma = gamma;
	}, true);

	window.addEventListener('devicemotion', function(e){
		var acceleration = e.acceleration;
		var accelerationIncludingGravity = e.accelerationIncludingGravity;
		$('#accelerationX').innerHTML = acceleration.x;
		$('#accelerationY').innerHTML = acceleration.y;
		$('#accelerationZ').innerHTML = acceleration.z;

		$('#accelerationIncludingGravityX').innerHTML = accelerationIncludingGravity.x;
		$('#accelerationIncludingGravityY').innerHTML = accelerationIncludingGravity.y;
		$('#accelerationIncludingGravityZ').innerHTML = accelerationIncludingGravity.z;

		payLoad.devicemotion.x = accelerationIncludingGravity.x;
		payLoad.devicemotion.y = accelerationIncludingGravity.y;
		payLoad.devicemotion.z = accelerationIncludingGravity.z;

	}, false);

	function sendPayLoad(){}

	var webSocket = new WebSocket('ws://192.168.217.71:4000/xxx', '3dgame-protocol');
	webSocket.onopen = function (event) {
		sendPayLoad();
	};


</script>
</body>
</html>
